<!-- 文件表格 -->
<div class="table-responsive"  id="file">
    <h3 class="mb-0">文件管理</h3>
    <!-- 添加文件按钮 -->
    <button data-toggle="modal" data-target="#add-file-modal" class="btn btn-primary">添加文件</button>

    <!-- 省略实际表格内容；可根据需求填充表格 -->
    <table class="table table-bordered table-hover" >
        <thead>
        <tr>
            <th>ID</th>
            <th>文件名</th>
            <th>作者</th>
            <th>查看文件</th>
        </tr>
        </thead>
        <tbody id="files-tbody">
        <!-- 使用 JavaScript 动态填充文件数据 -->
        </tbody>
    </table>
</div>

<!-- 增加文件模拟框 -->
<div class="modal fade" id="add-file-modal" tabindex="-1" role="dialog" aria-labelledby="add-file-modal-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="add-file-modal-label">添加文件</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="add-file-form">
                    <div class="form-group">
                        <label for="file-title">文件名</label>
                        <input type="text" class="form-control" id="file-title" name="name" placeholder="请输入文件名">
                    </div>
                    <div class="form-group">
                        <label for="file-author">作者</label>
                        <input type="text" class="form-control" id="file-author" name="owner" placeholder="请输入作者名">
                    </div>
                    <div class="form-group">
                        <label for="file-upload">上传文件</label>
                        <input type="file" class="form-control-file" name="file" id="file-upload">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="add-file-btn">添加文件</button>
            </div>
        </div>
    </div>
</div>

<!-- 查看文件模态框 -->
<div class="modal fade" id="view-file-modal" tabindex="-1" role="dialog" aria-labelledby="view-file-modal-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="view-file-modal-label">查看文件</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div id="view-file-content">
                    <!-- 这里将添加预览内容 -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>